.container {
  background-color: #1ba9ba;
  height: $topDateHeight;
  position: relative;
  transition: height 0.3s;
  $moreWidth: 74px;
  overflow: hidden;
  // z-index: -1;
  &::after {
    content: "";
    display: block;
    clear: both;
  }
  &.moving {
    // margin-top: -$topDateHeight;
    height: 0;
    overflow: hidden;
  }
  .box {
    width: calc(100vw - $moreWidth);
    overflow: hidden;
    height: $topDateHeight;

    .date {
      &.move {
        transition: transform 0.3s;
      }
      display: flex;
      width: calc(2 * (100vw - $moreWidth));
      height: $topDateHeight;
      box-sizing: border-box;
      font-size: 11px;
      margin: 0;
      padding: 0;
      // transition: transform 0s;

      .tab {
        // padding: 0 10px;
        border-radius: 5px;
        text-align: center;
        box-sizing: border-box;
        width: calc((100vw - $moreWidth) / 5);
        margin: 2px 0;
      }
      .active {
        background-color: #fff;
        color: #1ba9ba;
      }
    }
  }

  .more {
    background-color: #1ba9ba;
    position: absolute;
    left: calc(100vw - $moreWidth);
    text-align: center;
    width: $moreWidth;
    padding: 10px 10px;
    box-sizing: border-box;
    height: $topDateHeight;
    margin: 0;
    border-left: 1px solid #ffffff3c;
    font-size: 12px;
    .icon {
      width: 18px;
    }
  }
}
